<!-- eslint-disable vue/valid-v-for -->
<template>
    <div class="left-Page item-Page">
        <template v-for="(cur, key) in vueList" :key="key">
            <MenuTitle :config="cur"></MenuTitle>
            <div
                :style="{ height: cur.height }"
                class="left-menu"
                v-if="cur.componentKey === activeKey"
            >
                <component
                    :is="cur.key"
                    :key="cur.key"
                    :config="cur"
                    :height="cur.height"
                ></component>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import MenuTitle from "@/components/MenuTitle.vue";
import Date from "@/components/ui/Date.vue";


// const _width = (680 * _innerWidth) / 3836;
const activeKey = ref("ComprehensiveSituation");
const isPosition = ref(false);
onMounted(() => {
    THREEX.observer.on(
        "TOP_MENU_CHANGE",
        function (ev) {
            activeKey.value = ev.key || "ComprehensiveSituation";
        },
        `TOP_MENU_CHANGE_LEFT`
    );
});

let vueList = ref([
    {
        name: "项目工人数量统计",
        key: "ProjectHeadcount",
        icon: "menu1",
        // height: "calc(32%)",
        componentKey: "ComprehensiveSituation",
    },
    {
        name: "项目工种分布情况统计",
        key: "WorkTypeStats",
        icon: "menu2",
        // height: "calc(68%)",
        componentKey: "ComprehensiveSituation",
    },
    {
        name: "班组分布情况统计",
        key: "TeamStats",
        icon: "menu3",
        // height: "calc(68%)",
        componentKey: "ComprehensiveSituation",
    },
]);
</script>

<style scoped lang="less">
.left-Page {
    left: 1vh;

    background-size: 100% 100%;
}

</style>
